<template>
  <div class="web">
    <div class="top">
      <img :src="LeftImg" alt="" class="img_left" />
      <img :src="ReightImg" alt="" class="img_right" />
    </div>
    <div class="main">
      <div class="img"></div>
      <div class="right">
        <h2>{{ title }}</h2>
        <el-row>
          <el-input
            class="username"
            v-model="userName"
            placeholder="请输入账号"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><img :src="usericon" /></el-icon>
            </template>
          </el-input>
        </el-row>
        <el-row>
          <el-input
            class="password"
            v-model="password"
            type="password"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix>
              <el-icon class="el-input__icon"><img :src="pwdicon" /></el-icon>
            </template>
          </el-input>
        </el-row>
        <el-row>
          <el-input class="prov" v-model="code" placeholder="请输入验证码" />
          <el-input class="prov_s"><img src="" /></el-input>
        </el-row>
        <el-row class="power">
          <!-- <div>
          <input type="radio" name="a" value="student" />
          <p>{{ student }}</p>
        </div>
        <div>
          <input type="radio" name="a" value="teacher" />
          <p>{{ teacher }}</p>
        </div>
        <div>
          <input type="radio" name="a" value="admin" />
          <p>{{ admin }}</p>
        </div> -->
          <div style="margin-left:30px">
            <el-radio-group v-model="radio">
              <el-radio-button v-model="radio" label="1">学生</el-radio-button>
              <el-radio-button v-model="radio" label="2">老师</el-radio-button>
              <el-radio-button v-model="radio" label="3">管理员</el-radio-button>
            </el-radio-group>
          </div>
        </el-row>
        <el-button type="primary" class="loginBotton">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "LoginStar",
  setup() {
    const password = ref("");
    const userName = ref("");
    const code = ref("");
    const radio = ref("1")
    return {
      password,
      userName,
      code,
      radio,
      LeftImg: require("../assets/leftimg.png"),
      ReightImg: require("../assets/rightimg.png"),
      usericon: require("../assets/user.png"),
      pwdicon: require("../assets/password.png"),
      title: "学生实训考勤管理系统",
    };
  },
};
</script>

<style scoped>
.power {
  margin-top: 30px;
  margin-left: 18%;
}
.loginBotton {
  width: 200px;
  margin-top: 10%;
}
.prov {
  width: 140px;
  margin-left: 18%;
  margin-top: 30px;
}
.prov_s {
  width: 80px;
  margin-left: 40px;
  margin-top: 30px;
}
.username,
.password {
  width: 260px;
  margin-left: 18%;
  margin-top: 30px;
}
.el-input__icon img {
  width: 20px;
  height: 20px;
}
.main {
  width: 68%;
  height: 75%;
  border-radius: 20px;
  background-color: #ffffff;
  position: absolute;
  left: 16rem;
  top: 15%;
  min-width: 1000px;
}

.img {
  height: 800px;
  max-width: 60%;
  max-height: 100%;
  background: url("../../sucai/file.jpeg") no-repeat;
  background-size: 100% 100%;
}

.right {
  float: right;
  width: 35%;
  height: 90%;
  margin-top: -500px;
  margin-right: 30px;
  text-align: center;
}

h2 {
  margin-top: 50px;
}
.web {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../../sucai/background.png) no-repeat;
  background-size: 100% 100%;
  min-width: 1400px;
}
.top {
  width: 100%;
  height: 100px;
  display: inline-block;
  min-width: 1400px;
}
.img_left {
  margin-left: 5%;
  margin-top: 1%;
  float: left;
}
.img_right {
  margin-right: 5%;
  margin-top: 2%;
  float: right;
}
</style>
